<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <link rel="stylesheet" href="__STATIC__/tian/common/css/reset.css">
    <link rel="stylesheet" href="__STATIC__/tian/css/login.css">
</head>

<body>
<!-- 登录背景图 -->
<div class="bg">
    <img src="__STATIC__/tian/images/login_bg.png" alt="">
</div>
<!--<a href="{:url('Index/index')}" style="position: absolute;top: .2rem;left: .2rem"><div class="back">返回首页</div></a>-->
<div class="form">
    <div class="tabNav">
        <button class="on">找回密码</button>
    </div>
    <div style="margin-top: .25rem">
        <!-- 注册 -->
        <div class="register" style="display: block">
            <div class="item">
                <img src="__STATIC__/tian/images/icon/phone.png" alt="">
                <input type="text" id="phone" placeholder="请输入手机号">
            </div>
            <div class="item">
                <img src="__STATIC__/tian/images/icon/security-code.png" alt="">
                <input type="text" placeholder="请输入验证码" id="code">
                <button id="getCode">获取验证码</button>
            </div>
            <div class="item">
                <img src="__STATIC__/tian/images/icon/code.png" alt="">
                <input type="text" placeholder="请输入推荐码" id="register_recommend">
            </div>
            <div class="item">
                <img src="__STATIC__/tian/images/icon/password.png" alt="">
                <input type="password" id="register_password" data-flag="true" placeholder="请输入登录密码">
                <img class="show" onclick="onClickshowPs(this)" src="__STATIC__/tian/images/icon/age.png" alt="">
            </div>
            <div class="item">
                <img src="__STATIC__/tian/images/icon/password.png" alt="">
                <input type="password" id="register_password_re" data-flag="true" placeholder="请确认登录密码">
                <img class="show" onclick="onClickshowPs(this)" src="__STATIC__/tian/images/icon/age.png" alt="">
            </div>
        </div>
        <button class="submit" id="login_register">登&emsp;录</button>
    </div>
    <div class="bottom-link">
        <div class="register-link">
            <p>已有账号?</p>
            <button onclick="window.location.href = '{:url("Login")}'">登录</button>
        </div>
        <div class="register-link">
            <p>注册即代表您同意</p>
            <a href="#">《XXX会员注册协议》</a>
        </div>
    </div>
</div>
<script src="__STATIC__/User/js/jquery.min.js"></script>
<script>

    // 显示关闭密码
    function onClickshowPs(el) {
        let loginPs = el.parentElement.children[1]

        if (loginPs.getAttribute('data-flag') == 'true') {
            loginPs.type = 'text'
            loginPs.setAttribute('data-flag', false)
        } else {
            loginPs.type = 'password'
            loginPs.setAttribute('data-flag', true)
        }
    }


    // 获取验证码
    function onClickGetCode(callback) {
        document.querySelector('#getCode').addEventListener('click', function (e) {
            this.disabled = true
            let step = 60
            let timer = setInterval(() => {
                if (step <= 1) {
                    this.disabled = false
                    this.innerHTML = '重新获取验证码'
                    clearInterval(timer)
                    callback()
                    return
                }
                step--;
                this.innerHTML = step + '秒'
            }, 1000)

            e.preventDefault()
        })
    }

    //
    onClickGetCode(() => {
        // ... ajax

    })
</script>

</body>

</html>